sdk/samples/all in on code/Visual Studio 2010/CSASPNETAJAXHTMLEditorExtender/HTMLEditorExtender/ReadMe.txt

   1 ========================================================================
   2                  CSASPNETHTMLEditorExtender Overview
   3 ========================================================================
   4
   5 /////////////////////////////////////////////////////////////////////////////
   6 Use:
   7
   8 The project illustrates how to add a custom button to the toolbar of a
   9 HTMLEditor in the Ajax Control Toolkit 4.1.40412.0.
  10
  11 /////////////////////////////////////////////////////////////////////////////
  12 Demo the Sample.
  13
  14 Please follow these demonstration steps below.
  15
  16 Step 1: Open the CSASPNETHTMLEditorExtender.sln.
  17
  18 Step 2: [This step is very important!]Rebuild the solution.
  19
  20 Step 3: Expand the TestWebSite and right-click the Default.aspx
  21         and click "View in Browser".
  22
  23 Step 4: Input some text into the Editor.
  24
  25 Step 5: Select some text from your input.
  26
  27 Step 6: Click the last "H1" button form the top toolbar.
  28
  29 Step 7: You will see the selected text has been formatted to the style of H1.
  30         If you click the second button from the bottom toolbar, you will see
  31         that the selected text has been surrounded with tag <H1>.
  32
  33 /////////////////////////////////////////////////////////////////////////////
  34 Code Logical:
  35
  36 Step 1: Download the AjaxControlToolkit from this link:
  37         http://www.asp.net/ajaxlibrary/act.ashx
  38
  39 Step 2.  Create a C# "Class Library" project in Visual Studio 2010 or
  40          Visual Web Developer 2010. Change the name to HTMLEditorExtender.
  41
  42 Step 3.  Add references in the list below:
  43          AjaxControlToolkit (version 4.1.40412.0)
  44          System.Web
  45          System.Web.Extensions
  46
  47 Step 4.  Create two new folders, call them Images and ToolBar_buttons.
  48
  49 Step 5.  we need two icons for the button, one for the actived button and one
  50          for the un-actived button. I create two images,
  51          one called ed_format_h1_a.gif and another is ed_format_h1_n.gif.
  52          Add the two images into the folder Images.
  53
  54 Step 6.  Select the two images in the Solution Explorer of the VS.
  55          Right-click them and select Properties.
  56          You can find Build Action,
  57          set the Build Action to Embedded Resource.
  58
  59
  60 Step 7.  In the folder ToolBar_buttons, create a js file, I named it H1.pre.js.
  61
  62 Step 8.  Write the JavaScript functions in H1.pre.js to register
  63          the client features for the H1 button. We can get the full functions in
  64          the sample file H1.pre.js.
  65
  66 Step 9.  Do the same thing in Step 5, make the Build Action to Embedded Resource
  67          for the H1.pre.js
  68
  69 Step 10.  Create a new class file, I call it H1.cs, in the  ToolBar_buttons folder.
  70
  71 Step 11. Write the codes to register server side class for the button. Refer to
  72          sample file H1.cs.
  73
  74 Step 12. Create a new class in the root of the project, I call it MyEditor.cs.
  75          Write the code like below to make an extender Editor.
  76          [CODE]
  77          namespace HTMLEditorExtender
  78          {
  79              public class MyEditor : Editor
  80              {
  81                  protected override void FillTopToolbar()
  82                  {
  83                      base.FillTopToolbar();
  84                      TopToolbar.Buttons.Add(new H1());
  85                  }
  86              }
  87          }
  88          [/CODE]
  89
  90 Step 13. Build the project.
  91
  92 Step 14. Create a new C# "Web Site", change the last folder name to TestWebSite.
  93
  94 Step 15. Add reference of the class project, HTMLEditorExtender.
  95
  96 Step 16. Create a test page. And add two Register declaration like below.
  97          [CODE]
  98          <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
  99          <%@ Register Assembly="HTMLEditorExtender" Namespace="HTMLEditorExtender" TagPrefix="asp" %>
 100          [/CODE]
 101
 102 Step 17. Create a ToolScriptManager and a MyEditor to the page.
 103          [CODE]
 104          <asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1"></asp:ToolkitScriptManager>
 105          <asp:MyEditor runat="server" ID="MyEditor1" />
 106          [/CODE]
 107
 108 Step 18. Test the Default.aspx.
 109
 110 /////////////////////////////////////////////////////////////////////////////
 111 Reference:
 112
 113 HTMLEditor Tutorials
 114 http://www.asp.net/ajaxlibrary/act_HTMLEditor.ashx